<template>
  <div>
    <img src="../assets/mback.png" class="img">

    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 20px;">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>活动管理</el-breadcrumb-item>
        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

  <el-row class="tac">
    <el-col :span="3">
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        @select="handleSelect"
        background-color="#E0FFFF"
        text-color="#2E2E2E"
        active-text-color="#ffd04b">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>用户管理</span>
          </template>
          <el-submenu index="1-1">
            <template slot="title">用户信息</template>
            <el-menu-item index="1-1-1">用户信息展示</el-menu-item>
          </el-submenu>

          <el-submenu index="1-2">
            <template slot="title">用户处理</template>
            <el-menu-item index="1-2-1">新增用户</el-menu-item>
          </el-submenu>

        </el-submenu>

        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>土壤管理</span>
          </template>
          <el-submenu index="2-1">
            <template slot="title">土壤信息</template>
            <el-menu-item index="2-1-1">前一天内</el-menu-item>
            <el-menu-item index="2-1-2">前1小时内</el-menu-item>
          </el-submenu>

<!--          <el-submenu index="2-2">-->
<!--            <template slot="title">土壤区域处理</template>-->
<!--            <el-menu-item index="2-2-1">新增土壤区域</el-menu-item>-->
<!--          </el-submenu>-->

        </el-submenu>
<!--        <el-menu-item index="3" disabled>-->
<!--          <i class="el-icon-document"></i>-->
<!--          <span slot="title">导航三</span>-->
<!--        </el-menu-item>-->
<!--        <el-menu-item index="4">-->
<!--          <i class="el-icon-setting"></i>-->
<!--          <span slot="title">导航四</span>-->
<!--        </el-menu-item>-->
      </el-menu>
    </el-col>

    <el-col :span="20" style="float: right">
      <UserList v-if="show1"></UserList>
      <UserAdd v-if="show2"></UserAdd>
      <rSoilList v-if="show3"></rSoilList>
      <gSoilList v-if="show4"></gSoilList>
      <img src="../assets/111.jpg" id="mainback" v-if="show">
    </el-col>

  </el-row>

  </div>
</template>

<script>
import UserList from './userList'
import UserAdd from './userAdd'
import rSoilList from './rsoilList'
import gSoilList from './gsoilList'
export default {
  name: "qmain",
  components: {rSoilList, gSoilList,UserAdd, UserList},
  data() {
    return{
      activeIndex: '1',
      activeIndex2: '1',
      show: true,
      show1: false,
      show2: false,
      show3: false,
      show4: false
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect(key) {
      if (key== '1-1-1') {
        this.show=false
        this.show2=false
        this.show3=false
        this.show4=false
        this.show1 = true
      }
      else if(key == '1-2-1')
      {
        this.show=false
        this.show1=false
        this.show3=false
        this.show4=false
        this.show2=true
      }
      else if (key=='2-1-1')
      {
        this.show=false
        this.show1=false
        this.show2=false
        this.show4=true
        this.show3=false

      }
      else if (key=='2-1-2')
      {
        this.show=false
        this.show1=false
        this.show2=false
        this.show4=false
        this.show3=true
      }
      console.log(key);
    }
  }
}
</script>

<style scoped>
.img{
  position:fixed;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
  min-width: 1000px;
  z-index:-10;
  zoom: 1;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
}
#mainback{
  width: 1122px;
  height: 502px;
}
</style>
